<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-03-23 09:11:46
 * @LastEditTime: 2022-04-19 11:20:43
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="supplier">
    <div class="search">
      <div class="filterbox">
        <div class="search_header">
          <button @click="allPenreClick" class="all_genre"><i class="iconfont icon-quanbu"></i>全部分类</button>
          <i class="iconfont icon-jiantou_you"></i>
          <el-cascader
            size="small"
            ref="searchCascader"
            style="width: 500px"
            placeholder=""
            v-model.trim="searchValue"
            :options="materialList"
            :props="{
              multiple: true,
              checkStrictly: true,
              value: 'id',
              label: 'materialName',
              children: 'son'
            }"
            clearable
            collapse-tags
            @change="changeLabel"
            filterable
          ></el-cascader>
        </div>
        <div class="search_adderss">
          <div class="label">
            <i>供应地区：</i>
          </div>
          <div class="nav">
            <div :class="adderssType == 'open' ? 'open' : 'packUp'">
              <span :class="adderssIndex == null ? 'on' : ''" @click="adderssSelect(null, null)">全部</span>
              <span
                :class="adderssIndex == item.provinceId ? 'on' : ''"
                v-for="item in adderssList"
                :key="item.provinceId"
                @click="adderssSelect(item.provinceId, item.province)"
                >{{ item.province }}</span
              >
            </div>
            <el-button v-if="adderssType == 'open'" @click="adderssBtn('packUp')" size="mini" class="commonBtn bidd_btn"
              >更多<i class="iconfont icon-arrow-bottom"></i
            ></el-button>
            <el-button v-if="adderssType == 'packUp'" @click="adderssBtn('open')" size="mini" class="commonBtn bidd_btn"
              >收起<i class="iconfont icon-arrow-top"></i
            ></el-button>
          </div>
        </div>
        <div class="search_price">
          <div class="label">
            <i>注册资金：</i>
          </div>
          <div class="nav">
            <div>
              <span :class="priceIndex == null ? 'on' : ''" @click="priceSelect(null)">全部</span>
              <span
                :class="priceIndex == item.value ? 'on' : ''"
                v-for="item in priceList"
                :key="item.value"
                @click="priceSelect(item.value)"
                >{{ item.label }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="sort-nav">
        <div class="nav-left">
          <div @click="sortChange('start')">
            <span :class="{ active: releaseDateStatus == null }">综合排序</span>
          </div>
          <div @click="sortChange('end')">
            <span :class="{ active: bidDatelineStatus != null }">综合评分</span>
            <span class="sort-icon">
              <i :class="{ active: bidDatelineStatus === true }" class="el-icon-caret-top"></i>
              <i :class="{ active: bidDatelineStatus === false }" class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <div @click="sortChange('num')">
            <span :class="{ active: estimateTotalStatus != null }">签约数量</span>
            <span class="sort-icon">
              <i :class="{ active: estimateTotalStatus === true }" class="el-icon-caret-top"></i>
              <i :class="{ active: estimateTotalStatus === false }" class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <div @click="sortChange('price')">
            <span :class="{ active: estimateTotalPriceStatus != null }">签约金额</span>
            <span class="sort-icon">
              <i :class="{ active: estimateTotalPriceStatus === true }" class="el-icon-caret-top"></i>
              <i :class="{ active: estimateTotalPriceStatus === false }" class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <div @click="sortChange('time')">
            <span :class="{ active: timeStatus != null }">注册时间</span>
            <span class="sort-icon">
              <i :class="{ active: timeStatus === true }" class="el-icon-caret-top"></i>
              <i :class="{ active: timeStatus === false }" class="el-icon-caret-bottom"></i>
            </span>
          </div>
        </div>
        <div class="nav-right">
          <div style="width: 86px; height: 100%; cursor: pointer" @click="menuTab(1)">
            <i :class="{ active: menutype === 1 }" class="iconfont icon-xiangmubiaoqian"> </i>
          </div>
          <div style="width: 86px; height: 100%; cursor: pointer" @click="menuTab(2)">
            <i :class="{ active: menutype === 2 }" class="iconfont icon-bianjikuangwuxuliebiao17"> </i>
          </div>
          <div style="width: 148px; height: 100%">
            <span class="nav-pag" @click="reducePage" :style="page === 1 ? pageDisStyle : pageCliStyle">
              <i class="el-icon-caret-left"></i>
            </span>

            <span style="color: #fa7355; font-size: 18px"> {{ page }} </span>
            /{{ pages }}
            <span class="nav-pag" @click="increasePage" :style="page >= pages ? pageDisStyle : pageCliStyle">
              <i class="el-icon-caret-right"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="nocontent_bg" v-show="!total">
        <el-image :src="require('@/assets/role_bg2.png')"></el-image>
        <p style="color: #999999">暂无供应商信息</p>
      </div>
      <div v-show="menutype === 1 && total" class="list-content">
        <div class="item_wrap">
          <div
            v-for="(item, index) in supplierList"
            :key="index"
            :class="{ four: (index + 1) % 3 === 0 }"
            class="card-list"
            @click="goSupplierDetail(item.enterpriseId)"
          >
            <header class="card_header">
              <p class="score">综合评分:{{ item.comprehensiveScore || '--' }}</p>
              <p class="conpany_name">
                <tool-tip-node :value="item.enterpriseName" :oneLine="true"></tool-tip-node>
              </p>
            </header>
            <main class="card_main">
              <div class="main_top">
                <div class="conpany_logo">
                  <el-image :src="item.logo || url"></el-image>
                </div>
                <div class="main_num">
                  <label class="num_label">
                    <span>中标数量:</span>
                    <span style="font-size: 20px; color: #fc0d13; margin-left: 10px">{{ item.bidNumber }}</span>
                    <span style="color: #fc0d13">个</span>
                  </label>
                  <label class="num_label">
                    <span>签约数量:</span>
                    <span style="font-size: 20px; color: #30c776; margin-left: 10px">{{ item.contractNumber }}</span>
                    <span style="color: #30c776">单</span>
                  </label>
                  <label class="num_label">
                    <span>签约金额:</span>
                    <span style="font-size: 20px; color: #fd9e1a; margin-left: 10px">{{ item.contractAmount }}</span>
                    <span style="color: #fd9e1a">万元</span>
                  </label>
                </div>
              </div>
              <div class="main_bom">
                <div class="bom_item" style="margin-top: 0">
                  <div class="num_label">注册资金:</div>
                  <div class="bom_content">
                    {{ item.registeredCapital || '--' }}
                    {{ item.registeredCapital ? '万元' : '' }}
                  </div>
                </div>
                <div class="bom_item">
                  <div class="num_label">企业性质:</div>
                  <div class="bom_content">{{ item.enterpriseNature | filterNature }}</div>
                </div>
                <div class="bom_item">
                  <div class="num_label">经营范围:</div>
                  <div class="bom_content">
                    <tool-tip-node :value="item.businessScope" :oneLine="false" :isSetWidth="true"></tool-tip-node>
                  </div>
                </div>
                <div class="bom_item">
                  <div class="num_label">主营品牌:</div>
                  <div class="bom_content">
                    <tool-tip-node :value="item.mainBrand" :oneLine="true" :isSetWidth="true"></tool-tip-node>
                  </div>
                </div>
              </div>
            </main>
          </div>
        </div>
      </div>
      <div v-show="menutype === 2 && total" class="table-content">
        <el-table
          :data="supplierList"
          class="table"
          height="673px"
          ref="jdjgTable"
          border
          @row-click="rowClick"
          :header-cell-style="{
            padding: '0px',
            background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
          }"
          :row-class-name="tabRowClassName"
          header-row-class-name="mapTable_th"
        >
          <el-table-column label="企业名称" align="center" width="392" prop="enterpriseName"> </el-table-column>
          <el-table-column label="注册资金(万元)" align="center" width="161" prop="registeredCapital">
            <template slot-scope="scope">
              {{ scope.row.registeredCapital || '--' }}
            </template>
          </el-table-column>
          <el-table-column label="中标数量" align="center" width="161" prop="bidNumber"> </el-table-column>
          <el-table-column label="签约数量" align="center" width="161" prop="contractNumber"> </el-table-column>
          <el-table-column label="签约金额(万元)" align="center" width="161" prop="contractAmount"> </el-table-column>
          <el-table-column label="综合评分" align="center" prop="comprehensiveScore">
            <template slot-scope="scope">
              {{ scope.row.comprehensiveScore || '--' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div :class="{ footerpag: menutype === 2 }" class="pags" v-show="total">
        <element-pagination
          :Total="total"
          :Page="page"
          @getData="getPagChange"
          :pageSize="[18, 36, 72, 144]"
        ></element-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import ElementPagination from '../../components/ElementPagination.vue'
import ToolTipNode from '../../components/ToolTipNode.vue'
export default {
  components: { ToolTipNode, ElementPagination },
  data() {
    return {
      total: 0,
      supplierList: [],
      page: 1,
      size: 18,
      url: require('@/assets/images/building.png'),
      pages: 0,
      materialList: [],
      category: '',
      searchValue: [],
      shareScopeEnd: [],
      adderssList: [],
      adderssType: 'open',
      adderssIndex: null,
      priceIndex: null,
      priceList: [
        { label: '100万以下', value: 1 },
        { label: '100-300万', value: 2 },
        { label: '300-1000万', value: 3 },
        { label: '1000万以上', value: 4 }
      ],
      releaseDateStatus: null,
      bidDatelineStatus: null,
      estimateTotalStatus: null,
      estimateTotalPriceStatus: null,
      timeStatus: null,
      menutype: 1,
      addressName: ''
    }
  },
  computed: {
    pageDisStyle() {
      return { 'pointer-events': 'none', cursor: 'not-allowed' }
    },
    pageCliStyle() {
      return { cursor: 'pointer' }
    }
  },
  mounted() {
    this.selectMaterial()
    //调用公共方法获取省列表
    this.common.getAddressList('province').then(value => {
      this.adderssList = value
    })
    this.getData()
  },
  filters: {
    filterNature(val) {
      const obj = {
        0: '贸易商',
        1: '代理商',
        2: '生产商'
      }
      return obj[val]
    }
  },
  methods: {
    // 前往供应商信息详情页面
    goSupplierDetail(id) {
      localStorage.setItem('supplierID', id)
      this.$router.push({
        name: 'SupplierDetail',
        params: { id }
      })
    },
    // 当前页增加
    increasePage() {
      this.page++
      // 如果当前页大于总页数 设置为总页数
      if (this.page > this.pages) {
        this.page = this.pages || 1
        return false
      }
      this.getData()
    },
    // 当前页减少
    reducePage() {
      this.page--
      if (this.page === 0) {
        this.page = 1
        return false
      }
      this.getData()
    },
    menuTab(val) {
      this.menutype = val
    },
    sortChange(val) {
      this.releaseDateStatus = false
      if (val == 'start') {
        this.releaseDateStatus = null
        this.bidDatelineStatus = null
        this.timeStatus = null
        this.estimateTotalStatus = null
        this.estimateTotalPriceStatus = null
      } else if (val == 'end') {
        this.timeStatus = null
        this.estimateTotalStatus = null
        this.estimateTotalPriceStatus = null
        if (this.bidDatelineStatus == null) {
          this.bidDatelineStatus = true
        } else if (this.bidDatelineStatus == true) {
          this.bidDatelineStatus = false
        } else {
          this.bidDatelineStatus = null
          this.releaseDateStatus = null
        }
      } else if (val == 'num') {
        this.bidDatelineStatus = null
        this.timeStatus = null
        this.estimateTotalPriceStatus = null
        if (this.estimateTotalStatus == null) {
          this.estimateTotalStatus = true
        } else if (this.estimateTotalStatus == true) {
          this.estimateTotalStatus = false
        } else {
          this.estimateTotalStatus = null
          this.releaseDateStatus = null
        }
      } else if (val == 'price') {
        this.bidDatelineStatus = null
        this.timeStatus = null
        this.estimateTotalStatus = null
        if (this.estimateTotalPriceStatus == null) {
          this.estimateTotalPriceStatus = true
        } else if (this.estimateTotalPriceStatus == true) {
          this.estimateTotalPriceStatus = false
        } else {
          this.estimateTotalPriceStatus = null
          this.releaseDateStatus = null
        }
      } else if (val == 'time') {
        this.bidDatelineStatus = null
        this.estimateTotalStatus = null
        this.estimateTotalPriceStatus = null
        if (this.timeStatus == null) {
          this.timeStatus = true
        } else if (this.timeStatus == true) {
          this.timeStatus = false
        } else {
          this.timeStatus = null
          this.releaseDateStatus = null
        }
      }
      this.getData()
    },
    priceSelect(val) {
      this.priceIndex = val
      this.getData()
    },
    //交付地点展开收起
    adderssBtn(type) {
      this.adderssType = type
    },
    // 当前选中的地区
    adderssSelect(index, val) {
      this.adderssIndex = index
      this.addressName = val
      this.getData()
    },
    // 清空材料选择
    allPenreClick() {
      this.$refs.searchCascader.$refs.panel.clearCheckedNodes()
      this.$refs.searchCascader.$refs.panel.activePath = []
      this.shareScopeEnd = []
      this.searchValue = []
      this.category = ''
      this.getData()
    },
    //选择物资分类 一二级单选 三级多选
    changeLabel(val) {
      // 是否与上次的类型相同
      this.category = []
      let changeFlag = false
      let changeItem = null
      if (this.shareScopeEnd.length == 0) {
        this.searchValue = val
      } else {
        // 与原数组比对
        this.searchValue.forEach(item => {
          if (item[0] !== this.shareScopeEnd[0][0]) {
            // 一级标签不同
            changeFlag = true
            changeItem = item
          } else if ((!item[1] && this.shareScopeEnd[0][1]) || (item[1] && !this.shareScopeEnd[0][1])) {
            changeFlag = true
            changeItem = item
          }
        })
      }
      if (changeFlag) {
        this.searchValue = []
        this.searchValue.push(changeItem)
      }
      this.shareScopeEnd = this.searchValue
      this.shareScopeEnd.forEach(item => {
        // this.category.push({
        //   typeOneId: item[0],
        //   typeTwoId: item[1] || null,
        //   materialId: item[2] || null
        // })
        if (item[1]) {
          this.category += item[1] + ','
        } else {
          this.category = item[0] + ','
        }
      })
      this.category = this.category.length ? this.category.substr(0, this.category.length - 1) : ''
      this.getData()
    },
    //选择物资类别按钮
    selectMaterial() {
      this.$https({
        method: 'post',
        url: '/material/listAllMaterial',
        data: {}
      })
        .then(res => {
          if (res.code === 0) {
            this.materialList = res.data
            for (let i = 0; i < this.materialList.length; i++) {
              for (let j = 0; j < this.materialList[i]['son'].length; j++) {
                this.$set(this.materialList[i]['son'][j], 'son', null)
              }
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    rowClick(row, col, e) {
      this.goSupplierDetail(row.enterpriseId)
    },
    // 子组件触发分页时触发
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/supplier/getList',
        data: {
          page: this.page,
          size: this.size,
          score: this.bidDatelineStatus,
          time: this.timeStatus,
          bid: this.estimateTotalStatus,
          amount: this.estimateTotalPriceStatus,
          name: this.category,
          areaId: this.adderssIndex,
          registeredCapitalTypeId: this.priceIndex
        }
      })
        .then(res => {
          if (res.code == 0) {
            if (res.data === null) {
              this.supplierList = []
              this.total = 0
            } else {
              this.total = res.data.total
              this.supplierList = res.data.records
            }
            this.pages = Math.ceil(this.total / this.size)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  width: 1200px;
  padding: 30px 0;
  .bidd_btn {
    width: 80px;
    padding: 4px 0 !important;
  }
  .search_header {
    /deep/.el-tag.el-tag--info {
      color: #333;
    }
    .all_genre {
      font-size: 14px;
      padding: 5px 14px;
      color: #fa7355;
      background-color: #fee3dd;
      border: 1px solid #fa7355;
      border-radius: 5px;
      cursor: pointer;
      .iconfont {
        font-size: 14px;
        margin-right: 10px;
      }
    }
    .all_genre:hover {
      color: #fff;
      background-color: #fa7355;
    }
    .icon-jiantou_you {
      margin: 0 10px;
    }
  }
  .active {
    color: #fa7355;
  }
  .sort-nav {
    height: 50px;
    display: flex;
    margin-top: 10px;
    font-size: 16px;
    justify-content: space-between;
    align-items: center;
    background: #ebebeb;
    .sort-icon {
      display: inline-flex;
      flex-direction: column;
      padding: 5px 0;
      margin-left: 10px;
      .el-icon-caret-top {
        margin-top: 2px;
      }
      i {
        margin-top: -5px;
      }
    }
    .nav-left {
      div {
        padding-left: 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: center;
      }
    }
    .nav-left,
    .nav-right {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .nav-right {
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #d6d6d6;
      }
      .nav-pag {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        &:hover {
          color: #fa7355;
        }
      }
    }
    .icon-xiangmubiaoqian,
    .icon-bianjikuangwuxuliebiao17 {
      font-size: 24px;
    }
  }
  .search_adderss,
  .search_price {
    width: 100%;
    display: flex;
    justify-content: left;
    margin-top: 12px;
    .label {
      width: 80px;
      i {
        font-size: 16px;
        font-style: normal;
      }
    }
    .nav {
      width: 1120px;
      position: relative;
      .open {
        width: 1020px;
        height: 30px;
        overflow: hidden;
      }
      .packUp {
        width: 1020px;
        height: 100px;
        overflow-y: auto;
      }
      span {
        display: inline-block;
        font-size: 14px;
        margin-left: 30px;
        margin-bottom: 10px;
        padding: 2px 7px;
        cursor: pointer;
      }
      span:hover {
        color: #fa7355;
      }
      .on {
        border-radius: 5px;
        background-color: #fa7355;
        color: #fff !important;
      }
      .el-button {
        position: absolute;
        right: 0;
        top: 0;
      }
      .iconfont {
        margin-left: 5px;
      }
    }
  }
}
#supplier {
  .content {
    .pags {
      padding-bottom: 20px;
      /deep/.el-pagination {
        margin-top: 10px;
      }
    }
    .footerpag {
      margin-top: 20px;
    }
    .list-content {
      width: 1200px;
    }
    .item_wrap {
      display: flex;
      flex-wrap: wrap;
    }

    .card-list {
      // height: 396px;
      width: 384px;
      margin-bottom: 20px;
      margin-right: 20px;
      border: 1px solid #d6d6d6;
      background-color: #fff;
      border-radius: 5px;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.35);
        transform: translate(0, -1px);
      }
      .card_header {
        display: flex;
        align-items: center;
        padding: 16px;
        height: 22px;
        background: #f2f4f7;
        border-bottom: 1px solid #d6d6d6;
        border-radius: 5px 5px 0 0;
        .score {
          font-size: 14px;
          padding: 5px 8px;
          width: 88px;
          background-color: #fa7355;
          color: #fff;
        }
        .conpany_name {
          width: 238px;
          font-size: 16px;
          line-height: 20px;
          color: #333;
          margin-left: 10px;
          font-weight: 500;
        }
      }
      .card_main {
        padding: 16px;
        .num_label {
          color: #999;
          font-size: 14px;
          margin-right: 10px;
        }
        .main_top {
          display: flex;
          .conpany_logo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 103px;
            height: 103px;
            background: #f8f8f8;
            border: 1px solid #d6d6d6;
          }
          .main_num {
            margin-left: 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
        .main_bom {
          margin-top: 16px;
          display: flex;
          flex-direction: column;
          font-size: 14px;
          .bom_item {
            display: flex;
            margin-top: 10px;
          }
          span {
            color: #333;
          }
          .num_label {
            width: 60px;
          }
          .bom_content {
            display: flex;
            align-items: center;
            width: 280px;
          }
        }
      }
    }
    .four {
      margin-right: 0;
    }
  }
  .nocontent_bg {
    height: 474px;
  }
}
</style>
